<template>
  <el-row class="d-flex flex-column" v-if="$route.path === '/feedback/to-processed'">
    <el-col :span="24">
      <form class="el-form query-form el-form--label-right el-form--inline">
        <div class="el-form-item el-form-item--medium" v-if="admin.mType == 2 || admin.mType == 3">
          <label for="name" class="el-form-item__label" style="width: 60px;">区</label>
          <div class="el-form-item__content">
            <div class="el-input el-input--medium">
              <el-select v-model="query.rKey" placeholder="惠济区" @change="get_townAtt()">
                <el-option label="惠济区" value="1349"></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium" v-if="!(admin.mType >= 4)">
          <label for="date" class="el-form-item__label" style="width: 60px;">街道</label>
          <div class="el-form-item__content">
            <el-select
              v-model="query.zhenId"
              clearable
              placeholder="请选择想要查看的街道"
              @change="get_villageAtt()"
            >
              <el-option
                v-for="(town, index) in townAtt"
                :key="index"
                :label="town.zName"
                :value="town.zhenId"
              ></el-option>
            </el-select>
          </div>
          <!---->
        </div>
        <div class="el-form-item el-form-item--medium" v-if="!(admin.mType == 5)">
          <label for="date" class="el-form-item__label" style="width: 60px;">村</label>
          <div class="el-form-item__content">
            <el-select
              v-model="query.villageId"
              clearable
              placeholder="请选择想要查看的村"
              @change="get_groupAtt()"
            >
              <el-option
                v-for="(village, index) in villageAtt"
                :key="index"
                :label="village.vName"
                :value="village.villageId"
              ></el-option>
            </el-select>
          </div>
          <!---->
        </div>
        <div class="el-form-item el-form-item--medium">
          <label for="date" class="el-form-item__label" style="width: 80px;">群众意见建议内容</label>
          <div class="el-form-item__content">
            <el-input placeholder="请输入相关内容" v-model="query.title" clearable></el-input>
          </div>
        </div>
        <div class="el-form-item el-form-item--medium ml-6">
          <div class="el-form-item__content">
            <el-button type="primary" icon="el-icon-search" @click="to_query">搜索</el-button>
          </div>
        </div>
      </form>
    </el-col>
    <el-col :span="24">
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(225, 225, 225, 0.8)"
        ref="multipleTable"
        :data="items"
        border
        tooltip-effect="dark"
        style="width: 100%"
        max-height="600"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="120" align="center"></el-table-column>
        <el-table-column type="index" width="120" align="center"></el-table-column>
        <el-table-column label="群众意见建议类型" width="240" align="center" prop="backtype.bType"></el-table-column>
        <el-table-column label="群众意见建议标题" width="240" align="center" prop="fTitle"></el-table-column>
        <el-table-column label="时间" width="200" align="center" prop="fTime"></el-table-column>
        <el-table-column label="编辑" align="center" show-overflow-tooltip>
          <template slot-scope="scope" v-if="$route.path === '/feedback/to-processed'">
            <el-button
              v-if="!(admin.mType == 3)"
              type="info"
              icon="el-icon-tickets"
              @click="updata(scope.$index)"
            >详情</el-button>
            <el-button
              v-if="admin.mType == 4"
              :type="scope.row.fJudge == 1 ?  'success' : 'danger'"
              :icon="scope.row.fJudge == 1 ? 'el-icon-check' : 'el-icon-info'"
              @click="up_feedback(scope.$index)"
            >{{ scope.row.fJudge == 1 ? '群众意见建议成功' : '向上传递群众意见建议'}}</el-button>
            <el-button
              v-if="admin.mType == 5"
              :type="scope.row.fJudge == 1 ?  'success' : 'danger'"
              :icon="scope.row.fJudge == 1 ? 'el-icon-check' : 'el-icon-info'"
              @click="up_feedback(scope.$index)"
            >{{ scope.row.fJudge == 1 ? '群众意见建议成功' : '向上传递群众意见建议'}}</el-button>
            <el-button
              v-if="scope.row.fJudge == 1 && admin.mType == 5"
              type="warning"
              icon="el-icon-edit"
              @click="withdraw(scope.$index)"
            >{{ '撤回已向上反馈的反馈信息' }}</el-button>
            <el-button
              v-if="scope.row.fJudge == 2 && admin.mType == 4"
              type="warning"
              icon="el-icon-edit"
              @click="withdraw(scope.$index)"
            >{{ '撤回已向上反馈的反馈信息' }}</el-button>
            <el-button
              v-if="scope.row.fJudge == 2 && admin.mType < 5"
              type="warning"
              icon="el-icon-edit"
              @click="_return(scope.$index)"
            >{{ '退回反馈' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-row class="d-flex jc-end">
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.current_page"
                :page-sizes="pagination.page_sizes"
                :page-size="pagination.page_size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
              ></el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
    <el-dialog
      title="群众意见建议详情"
      v-if="$route.path === '/feedback/to-processed'"
      width="23%"
      :show-close="true"
      :close-on-click-modal="false"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible_edmit"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="5.625rem"
        class="d-flex flex-column w-10 p-2 pt-0"
      >
        <el-col :span="24">
          <el-col :span="24" class="d-flex flex-column">
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">时间</label>
              <div class="el-form-item__content">
                <el-input v-model="form.fTime" clearable :disabled="true"></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">群众意见建议人</label>
              <div class="el-form-item__content">
                <el-input v-model="form.yonghu.userName" clearable :disabled="true"></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">标题</label>
              <div class="el-form-item__content">
                <el-input v-model="form.fTitle" clearable :disabled="true"></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">类型</label>
              <div class="el-form-item__content">
                <el-input v-model="form.backtype.bType" clearable :disabled="true"></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">内容</label>
              <div class="el-form-item__content flex-1">
                <el-input type="textarea" v-model="form.fContent" :disabled="true"></el-input>
              </div>
            </div>
            <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
              <label for="date" class="el-form-item__label" style="width: 5.625rem;">相关图片</label>
              <div class="el-form-item__content flex-1">
                <el-card :body-style="{ padding: '0px' }" class="d-flex jc-start">
                  <img
                    v-for="image in form.fImagepath"
                    :key="image"
                    :src="image"
                    class="image w-5 h-6r"
                  />
                </el-card>
              </div>
            </div>
          </el-col>
        </el-col>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel_u">取 消</el-button>
        <el-button type="primary" @click="next">去 回 复</el-button>
      </div>

      <el-dialog
        width="30%"
        title="群众意见建议回复"
        :visible.sync="innerVisible"
        :show-close="false"
        :close-on-click-modal="false"
        :lock-scroll="true"
        append-to-body
      >
        <el-form
          ref="form"
          :model="form"
          label-width="5.625rem"
          class="d-flex flex-column w-10 p-2 pt-0"
        >
          <el-col :span="24">
            <el-col :span="24" class="d-flex flex-column">
              <div class="el-form-item el-form-item--medium mb-2 w-10 d-flex jc-start">
                <label for="date" class="el-form-item__label" style="width: 5.625rem;">回复内容</label>
                <div class="el-form-item__content flex-1">
                  <el-input type="textarea" v-model="form.frContent"></el-input>
                </div>
              </div>
            </el-col>
          </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel_c">取 消</el-button>
          <el-button type="primary" @click="updata_save">提交</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </el-row>
</template>


<script>
export default {
  data() {
    return {
      model: {},
      admin: {},
      obj: {},
      items: [
        //表格内容
      ],
      init_items: [
        //原始表格渲染数据
      ],
      pagination: {
        current_page: 1,
        page_sizes: [20, 30, 50, 100],
        page_size: 20,
        total: 0,
        page_length: 0
      },
      loading: true,
      formLabelWidth: "100px",
      form: {
        //弹出框内容
        yonghu: {},
        backtype: {}
      },
      query: {
        //检索对象
        method: true,
        data: {},
        rKey: "1349"
      },
      //序列id
      index_id: 0,
      index: 0,
      //对应村
      villageAtt: [],
      villageAtt_form: [],
      //对应镇
      townAtt: [],
      townAtt_form: [],
      //对应组
      groupAtt: [],
      groupAtt_form: [],
      //多删数组
      delAtt: [],
      multipleSelection: [],
      //文件上传
      fileList: [],
      //删除的对象
      del_obj: {},
      delMany: {},
      //模态框
      dialogFormVisible_create: false,
      dialogFormVisible_edmit: false,
      innerVisible: false,
      //向上反馈 和 撤销反馈
      upUrl: ``,
      cancelUrl: ``,
      returnUrl: ``
    };
  },

  methods: {
    setQuery() {
      if (this.admin.mType == 2) this.returnUrl = `CancelXiangShangFanKuiqu`;
      if (this.admin.mType == 4) {
        this.query.rKey = this.admin.mRegion;
        this.query.zhenId = this.admin.mZhenid;
        this.get_villageAtt();
        this.upUrl = `Xiangshangfankuizhen`;
        this.cancelUrl = `CancelXiangShangFanKuizhen`;
        this.returnUrl = `CancelXiangShangFanKui_TuiHuiCunFeedback`;
      }
      if (this.admin.mType == 5) {
        this.query.rKey = this.admin.mRegion;
        this.query.zhenId = this.admin.mZhenid;
        this.query.villageId = this.admin.mVillageid;
        this.upUrl = `Xiangshangfankui`;
        this.cancelUrl = `CancelXiangShangFanKui`;
      }
    },
    setObj(obj) {
      obj.mType = this.admin.mType;
      obj.rKey = this.query.rKey || 1349;
      obj.zhenId = this.query.zhenId || 0;
      obj.title = this.query.title || 0;
      obj.villageId = this.query.villageId || 0;
      obj.startPage = this.pagination.current_page;
      obj.pageSize = this.pagination.page_size;
    },
    async get_townAtt(flag) {
      let res;
      if (flag) {
        res = await this.$http.get(`/caiwu/findzhenByRegionId/1349`);
        this.townAtt_form = res.data.data;
      } else {
        res = await this.$http.get(
          `/caiwu/findzhenByRegionId/${this.query.rKey}`
        );
        this.townAtt = res.data.data;
      }
    },
    async get_villageAtt(flag) {
      let res;
      if (flag) {
        res = await this.$http.get(
          `/caiwu/findzhenByZhenId/${this.form.mZhenid}`
        );
        this.villageAtt_form = res.data.data;
      } else {
        res = await this.$http.get(
          `/caiwu/findzhenByZhenId/${this.query.zhenId}`
        );
        this.villageAtt = res.data.data;
      }
    },
    async get_groupAtt(flag) {
      let res;
      if (flag) {
        res = await this.$http.get(`/caiwu/findZu/${this.form.mVillageid}`);
        this.groupAtt_form = res.data.data;
      } else {
        res = await this.$http.get(`/caiwu/findZu/${this.query.villageId}`);
        this.groupAtt = res.data.data;
      }
    },
    //请求数据
    async fetch(obj) {
      this.setObj(obj);
      const res = await this.$http.post(
        "/WeichuliSearch",
        this.Qs.stringify(obj)
      );
      let data = [];
      res.data.record.forEach(item => {
        let att = [];
        if (item.fJudge && this.admin.mType == "2") {
          data.push(item);
        }
        if (item.fImagepath) {
          item.fImagepath = item.fImagepath.split(",");
          item.fImagepath.forEach(item => {
            if (item) {
              att.push(`${this.assetsURL}Feedback/${item}`);
            }
          });
        }
        item.fImagepath = att;
      });
      if (this.admin.mType == "2") {
        this.items = data;
      } else {
        this.items = res.data.record;
      }
      this.up_pagination();
      if (
        this.$util.getCookie("current_page") !==
        String(this.pagination.current_page)
      ) {
        this.handleCurrentChange(this.$util.getCookie("current_page"));
      }
      if (res.status == 200) {
        this.loading = false;
      }
    },
    handleSelectionChange(val) {
      let att = [];
      this.multipleSelection = val;
      this.multipleSelection.forEach(item => {
        let { H_Key } = item;
        att.push(H_Key);
      });
      this.delAtt = att;
    },
    setIndex() {
      this.$basicMes.forEach((item, index) => {
        if (item.name == this.query.town) {
          this.villageAtt = this.$basicMes[index].village;
        }
      });
    },
    get_delObj() {
      let { managerId } = this.admin;
      this.del_obj = { managerId };
    },
    get_delMany() {
      this.delMany = this.delAtt;
    },
    del(index, name) {
      this.get_delObj();
      this.index_id = index;
      this.form = this.items[index];
      this.del_obj.capitalDetailsId = this.form.CapitalDetails_Id;
      this.$confirm(
        `此操作将永久删除 ${this.items[index][name]}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }
      )
        .then(async index => {
          const res = await this.$http.delete(
            `/HuDeleteone/${this.form.H_Key}/${this.admin.managerId}`
          );
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.to_query();
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    updata(index) {
      this.index_id = index;
      this.form = this.items[index];
      console.log(this.form);
      this.dialogFormVisible_edmit = true;
    },
    async del_multip(name) {
      if (!this.delAtt.length) {
        return;
      }
      this.get_delMany();
      let str = "";
      this.multipleSelection.forEach(item => {
        str += item[name] + "\t\t";
      });

      this.$confirm(`此操作将永久删除 ${str}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async index => {
          const res = await this.$http.delete(
            `/HuDeleteMany/${this.delAtt.toString()}/${this.admin.managerId}`
          );
          console.log(".....////");
          console.log(res);
          if (res.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.to_query();
          } else {
            this.$message({
              type: "error",
              message: "删除失败!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    //选择文件
    select_file() {
      let path = this.$route.name;
    },
    //文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    //分页功能
    up_pagination() {
      this.pagination.page_length = Math.ceil(
        this.init_items.count / this.pagination.current_page
      );
      this.pagination.total = this.init_items.count;
    },
    handleSizeChange(val) {
      this.pagination.page_size = val;
      this.pagination.current_page = 1;
    },
    async handleCurrentChange(val) {
      this.pagination.current_page = val;
      this.$util.setCookie("current_page", this.pagination.current_page);
      this.to_query();
    },
    //query
    to_query() {
      let obj = JSON.parse(JSON.stringify(this.query));
      this.fetch(obj);
    },

    //create
    reset_c() {
      this.$confirm("确定重置新增数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        this.$message({
          type: "success",
          message: "已重置"
        });
        this.form = {};
      });
    },
    show_form() {
      this.get_townAtt(true);
      this.dialogFormVisible_create = true;
    },
    set_form() {
      this.form.managerId = this.admin.managerId;
      for (let item in this.form) {
        if (!this.form[item]) {
          delete this.form[item];
        }
      }
    },
    cancel_c() {
      this.$confirm("取消添加将不会保存该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已取消！"
          });
          this.innerVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    },
    success_c(res, file, files) {},
    async create() {
      this.set_form(this.form);
      const res = await this.$http.post(
        `/HuInsert`,
        this.Qs.stringify(this.form)
      );
      if (res.status == 200) {
        this.$message({
          type: "success",
          message: `${res.data.stste}`
        });
        this.to_query();
        this.dialogFormVisible_create = false;
      }
    },

    cancel_u() {
      setTimeout(() => {
        this.dialogFormVisible_edmit = false;
      }, 200);
    },
    next() {
      this.innerVisible = true;
    },
    async updata_save() {
      this.form.managerId = this.admin.managerId;
      this.form.frFeedbackid = this.form.feedbackId;
      const res = await this.$http.post(
        "/FeedbackReply",
        this.Qs.stringify(this.form)
      );
      if (res.status == 200) {
        this.innerVisible = false;
        this.$message({
          message: "回复成功",
          type: "success"
        });
        this.to_query();
      } else {
        this.$message({
          message: "回复失败",
          type: "error"
        });
      }
    },
    async up_feedback(index) {
      if (!this.items[index].fJudge) {
        this.$confirm("确定要向上群众意见建议?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            const res = await this.$http.post(
              `${this.upUrl}`,
              this.Qs.stringify({
                feedbackId: this.items[index].feedbackId
              })
            );
            if (res.data.statue == "success") {
              this.$message({
                message: "向上群众意见建议成功",
                type: "success"
              });
            }
            this.to_query();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消群众意见建议"
            });
          });
      } else {
        this.$message({
          message: "已经群众意见建议",
          type: "info"
        });
      }
    },
    async withdraw(index) {
      if (this.items[index].fJudge) {
        this.$confirm("确定要撤回向上群众意见建议?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            const res = await this.$http.post(
              `${this.cancelUrl}?feedbackId=${this.items[index].feedbackId}`
            );
            if (res.data.statue == "success") {
              this.$message({
                message: "向上群众意见建议撤回成功",
                type: "success"
              });
            }
            this.to_query();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消群众意见建议撤回失败"
            });
          });
      } else {
        this.$message({
          message: "未向上反馈",
          type: "info"
        });
      }
    },
    async _return(index) {
      if (this.items[index].fJudge) {
        this.$confirm("确定要退回向上群众意见建议?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            const res = await this.$http.post(
              `${this.returnUrl}?feedbackId=${this.items[index].feedbackId}`
            );
            if (res.data.statue == "success") {
              this.$message({
                message: "退回成功",
                type: "success"
              });
            }
            this.to_query();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "退回失败"
            });
          });
      } else {
        this.$message({
          message: "未向上反馈",
          type: "info"
        });
      }
    }
  },
  created() {
    this.admin = this.$util.handleLocalStorage("get", "admin");
    this.pagination.current_page = 1;
    this.$util.setCookie("current_page", this.pagination.current_page);
    this.get_townAtt();
    this.setQuery();
    this.fetch(this.obj);
  }
};
</script>

<style lang="scss" scoped>
.query-form {
  padding-top: 20px;
  margin-bottom: 20px;
  background-color: #f2f2f2;
  display: flex;
  justify-content: flex-start;
}
.el-form--inline .el-form-item {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
}
</style>

